<!-- 商品分类 -->
<template>
  <div>
    <el-row>
      <el-button type="danger"
                 size="mini"
                 round
                 @click="removeByIds">批量删除</el-button>
    </el-row>
    <el-tree :data="menus"
             :props="defaultProps"
             node-key="catId"
             show-checkbox
             :default-expanded-keys="expandedkeys"
             ref="elTree">
      <span class="custom-tree-node"
            slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if="node.level <= 2"
                     type="text"
                     size="mini"
                     @click="() => append(data)">
            Append
          </el-button>
          <el-button v-if="node.childNodes.length == 0"
                     type="text"
                     size="mini"
                     @click="() => remove(node,data)">
            Delete
          </el-button>
          <el-button type="text"
                     size="mini"
                     @click="() => edit(node,data)">
            Edit
          </el-button>
        </span>
      </span>
    </el-tree>
    <!-- 新增分类对话框 -->
    <el-dialog title="新增分类"
               :visible.sync="dialogVisible"
               width="30%">
      <!-- 对话框中的表单 -->
      <el-form :model="categoryInfo">
        <el-form-item label="分类名称">
          <el-input v-model="categoryInfo.name"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="categoryInfo">
        <el-form-item label="计量单位">
          <el-input v-model="categoryInfo.productUnit"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="addOrEidtCategory()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      //当前树结构数据
      menus: [],
      //默认展开的节点的key的数组
      expandedkeys: [],
      // 控制对话框的显示和隐藏
      dialogVisible: false,
      // 增加，修改分类的表单对象
      categoryInfo: {
        catId: null,
        name: "",
        parentCid: 0,
        catLevel: 0,
        showStatus: 1,
        sort: 0,
        icon: "www.testIcon.com",
        productUnit: "",
        productCount: 100
      },
      // 选中的想要删除的节点
      deleteCategorys: [],
      defaultProps: {
        children: "childrens",
        label: "name",
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 查询列表
    getCategory () {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        this.menus = data.data;
      });
    },
    append (data) {
      console.log("append", data);
      this.dialogVisible = true;
      // 层级标识
      this.categoryInfo.catLevel = data.catLevel * 1 + 1;
      this.categoryInfo.parentCid = data.catId
      this.categoryInfo
      this.expandedkeys = [this.categoryInfo.parentCid];
    },
    // 新增/修改分类
    addOrEidtCategory () {
      // 保存
      if (this.categoryInfo.catId == null) {
        console.log("保存中------", this.categoryInfo.catId);
        this.$http({
          url: this.$http.adornUrl('/product/category/save'),
          method: 'post',
          data: this.$http.adornData(this.categoryInfo, false)
        }).then(({ data }) => {
          this.dialogVisible = false;
          this.$message({
            type: 'success',
            message: `【${this.categoryInfo.name}】新增成功!`
          });
          this.getCategory()
          // // 展开刚刚删除的树型
          this.expandedkeys = [this.categoryInfo.parentCid];
          this.initCategoryInfo();
        });
      } else {
        // 修改

        console.log("修改中------", this.categoryInfo);
        this.$http({
          url: this.$http.adornUrl('/product/category/update'),
          method: 'post',
          data: this.$http.adornData(this.categoryInfo, false)
        }).then(({ data }) => {
          this.dialogVisible = false;
          this.$message({
            type: 'success',
            message: `【${this.categoryInfo.name}】修改成功!`
          });
          this.getCategory()
          this.expandedkeys = [this.categoryInfo.parentCid];
          this.initCategoryInfo();
        });
      }
    },
    // 删除
    remove (node, data) {
      console.log("data的数据为", data);
      var ids = [data.catId];
      var categoryName = data.name
      console.log(ids, categoryName);
      this.$confirm(`此操作将永久删除【${data.name}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/product/category/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          this.$message({
            type: 'success',
            message: `【${categoryName}】删除成功!`
          });
          // 从新请求菜单数据，刷新页面
          this.getCategory()
          // 展开刚刚删除的树型
          this.expandedkeys = [node.parent.data.catId];
          // 清空数据
          this.initCategoryInfo();

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //批量删除
    removeByIds () {
      this.deleteCategorys = this.$refs.elTree.getCheckedNodes(false, false)
      let ids = [];
      let deleteCategoryNames = [];
      for (let i = 0; i < this.deleteCategorys.length; i++) {
        deleteCategoryNames.push(this.deleteCategorys[i].name);
        ids.push(this.deleteCategorys[i].catId);
      }
      console.log(ids, deleteCategoryNames);
      this.$confirm(`此操作将永久删除【${deleteCategoryNames}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/product/category/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          this.$message({
            type: 'success',
            message: `【${deleteCategoryNames}】删除成功!`
          });
          // 从新请求菜单数据，刷新页面
          this.getCategory()
          // 展开刚刚删除的树型
          this.expandedkeys = [node.parent.data.catId];
          // 清空数据
          this.initCategoryInfo();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    // 修改前属性初始化
    edit ({ data }) {
      console.log(data);
      this.dialogVisible = true;
      this.categoryInfo = data;
      this.categoryInfo.catId = data.catId;

    },
    // 初始化CategoryInfo属性
    initCategoryInfo () {
      this.catId = null,
        this.name = "",
        this.parentCid = 0,
        this.catLevel = 0,
        this.showStatus = 1,
        this.sort = 0,
        this.icon = "www.testIcon.com",
        this.productUnit = "",
        this.productCount = 100
    }
  },
  created () {
    this.getCategory();
  },
  mounted () { },
};
</script>
<style scoped>
</style>